<template>
  <view class="photoShowBox">
    <image
      v-for="(item,index) in props.imageList" :key="index"
      :src="item"
      mode="aspectFill"
      @click="previewImage(index)"
    />
  </view>
</template>

<!-- 图片展示组件 -->
<script lang="ts" setup>
import {
  ref,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onActivated,
  onDeactivated,
  onBeforeUnmount,
  type PropType,
} from 'vue'

//接受父组件传递的图片参数
const props = defineProps({
  imageList: {
    type: Array as PropType<string[]>,
    default: () => [],
  },
})

//图片预览
const previewImage = (index:number)=>{
  uni.previewImage({current:index, urls:props.imageList});
}

// 组件周期函数--监听组件挂载完毕
onMounted(() => {})
// 组件周期函数--监听组件数据更新之前
onBeforeUpdate(() => {})
// 组件周期函数--监听组件数据更新之后
onUpdated(() => {})
// 组件周期函数--监听组件激活(显示)
onActivated(() => {})
// 组件周期函数--监听组件停用(隐藏)
onDeactivated(() => {})
// 组件周期函数--监听组件销毁之前
onBeforeUnmount(() => {})
</script>

<style scoped lang="scss">
.photoShowBox {
  display: grid;
  /*  声明了三列，宽度分别为 200px 100px 200px */
  display: grid;

  grid-template-columns: repeat(auto-fill, 220rpx);
  grid-gap: 10rpx;
  grid-row: 10rpx;
  margin: auto;
  justify-items: center;
  justify-content: center;

  /*  声明了两行，行高分别为 50px 50px  */

  image {
    width: 220rpx;
    height: 220rpx;
  }
}
</style>
